<template>
  <div class="pdfView">
    <view id="pdf-content"></view>
  </div>
</template>

<script>
import Pdfh5 from "pdfh5";
export default {
  name: 'pdfView',
  components: {
  },
  props: {
    url: null,
    text: {
      type: String,
      default: () => ''
    }
  },
  data () {
    return {
    };
  },
  async onLoad () {
    await this.initPdf()
  },
  created () { },
  methods: {
    initPdf () {
      this.url = 'https://cqzr-1318844901.cos.ap-chongqing.myqcloud.com/pdf/04_Policy/01.pdf'
      // location.replace(this.url);
      // const loadingTask = PDF.createLoadingTask(this.url)
      // loadingTask.promise
      //   .then((pdf) => {
      //     this.pageNum = pdf.numPages
      //   })
      //   .catch((err) => {
      //     console.error('pdf 加载失败', err)
      //   })
      // return
      console.log('子组件的地址', pdfUrl)
      // pdfh5实例化时传两个参数：selector选择器，options配置项参数，会返回一个pdfh5实例对象，可以操作pdf，监听相关事件
      this.pdfh5 = new Pdfh5('#pdf-content', {
        pdfurl: this.url,
        cMapUrl: 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/' // 改一下这个参数的默认地址
      })
      this.pdfh5.scrollEnable(true) // 允许pdf滚动
      // 监听pdf准备开始渲染，可以拿到pdf总页数
      this.pdfh5.on('ready', function () {
        console.log('总页数:' + this.totalNum)
      })
      // 监听pdf加载完成事件
      this.pdfh5.on('complete', (status, msg, time) => {
        console.log('状态:' + status + '，信息:' + msg + '，耗时:' + time + '毫秒')
      })
    }
  },
  mounted () {
  },
};
</script>

<style lang="scss" scoped>
.pdfView {
  width: 100%;
  height: 100%;
}
</style>
